<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/jquery-1.8.0.min.js"></script>
    <script src="../../js/jquery-smartMenu.js"></script>
    <link rel="stylesheet" href="../../css/smartMenu.css">
    <style type="text/css">
        #menu {
            width: 160px;
            border: 1px solid gray;
            background-color: #fafafa;
            padding: 10px;
            display: none;
            position: absolute;
        }

        ul,
        li {
            margin: 0;
            padding: 2px;
            list-style-type: none;
            font-size: small;
        }
    </style>
</head>

<body>
<span>testspan</span>
<div id="menu">

    <ul>
        <li ><span style="cursor:pointer;" onclick="roughPlanSelect()">工单提取计划粗排</span></li>
        <li><span style="cursor:pointer" onclick="roughPlanPush()">推送计划初稿</span></li>
        <li><span style="cursor:pointer" onclick="componentPlanCheck()">零组件计划预判</span></li>
        <li><span style="cursor:pointer" onclick="excelExport()">EXCEL导出</span></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var menu = document.getElementById("menu");

    document.oncontextmenu = function(ev) {
        //兼容浏览器
        var oEvent = ev || event;
        //自定义的菜单显示

        menu.style.display = "block";
        //让自定义菜单随鼠标的箭头位置移动
        menu.style.left = oEvent.clientX + "px";
        menu.style.top = oEvent.clientY + "px";
        //return false阻止系统自带的菜单，
        //return false必须写在最后，否则自定义的右键菜单也不会出现
        return false;
    }


    //实现点击document，自定义菜单消失
    document.onclick = function() {
        menu.style.display = "none";
    }
    //计划粗排
    function roughPlanSelect() {
        alert("计划粗排");
    }
    //Excel 导出
    function excelExport() {
        alert("导出excel")
    }
</script>

</html>